<template>
  <div class="dt-table-select">
    <!-- 选择框 -->
    <div class="tag-box" style="display: flex">
      <div class="select-tag" @click="openDialog">
        <div>
          <template v-if="showField">
            <el-tag v-for="(tag, index) in tagList" :key="index" type="info"
                    @close="closeTag(tag)">
              {{ tag[showField] || "" }}
            </el-tag>
          </template>
          <span v-if="!tagList.length" class="plactext">{{ placeholder }}</span>
        </div>
        <i @click.stop.prevent="clearSelect" class="el-icon-circle-close close" />
      </div>
    </div>
    <!-- 弹窗 -->
    <slot/>
  </div>
</template>

<script>
export default {
  name: 'BusinessAssociat',
  props: {
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 展示字段名
    showField: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tagList: []
    }
  },
  methods: {
    clearSelect() {
      this.tagList = []
      this.$emit('clearSelect', [])
    },
    openDialog() {
      this.$emit('open', true)
    },
    confirm(multipleSelection, type) {
      this.tagList = multipleSelection
      // if (type) {
      //   const temp = multipleSelection.map((item) => {
      //     return { id: item.id, [this.showField]: item[this.showField]
      //     }
      //   })
      //   this.$emit('input', temp)
      // }
      // this.$emit('cancel')
    }
  }
}
</script>

  <style lang="scss" scoped>
  .dt-table-select{
      .select-tag {
      border: 1px #dcdfe6 solid;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
      height: 100%;
      padding: 0px 8px 0 8px;
      margin: auto;
      min-height: 36px;
      line-height: 36px;
      min-width: 200px;
      position: relative;
      .close{
        position: absolute;
        right: 10px;
        top:12px;
        color: #dcdfe6;
      }

      > div {
        margin: auto;
      }

      .el-tag {
        margin-right: 5px;
        margin-bottom: 4px;
      }
    }

    .isDisabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }

    .plactext {
      color: #dcdfe6;
    }
  }

  </style>

